<template>
  <div class="goodList">
    <div class="container">
      <li v-for="item in shopList" :key="item.id">
        <div class="pic">
          <img :src="item.src" alt="">
        </div>
        <div class="content">
          <p>{{ item.title }}</p>
          <p class="price">${{ item.price }}</p>
          <input type="button" value="加入购物车" @click="add(item.id)">
        </div>
      </li>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodList',
  data() {
    return {
      shopList: [
        { id: 1, title: '电水壶', price: 50.01, src: require('@/assets/images/1.jpg') },
        { id: 2, title: '电压力锅', price: 260.99, src: require('@/assets/images/2.jpg') },
        { id: 3, title: '电饭煲', price: 200.99, src: require('@/assets/images/3.jpg') },
        { id: 4, title: '电磁炉', price: 300.99, src: require('@/assets/images/4.jpg') },
        { id: 5, title: '微波炉', price: 400.99, src: require('@/assets/images/5.jpg') },
        { id: 6, title: '电饼铛', price: 200.99, src: require('@/assets/images/6.jpg') },
        { id: 7, title: '豆浆机', price: 199.99, src: require('@/assets/images/7.jpg') },
        { id: 8, title: '多用途锅', price: 510.99, src: require('@/assets/images/8.jpg') }
      ]
    }
  },
  methods: {
    add(id) {
      this.shopList.some(x => {
        if (x.id === id) {
          this.$emit('addChange', x)
        }
      })
    }
  }
}
</script>

<style scoped>
.goodList {
  list-style: none;
}
.container li {
  display: flex;
  flex-direction: row;
  padding: 5px;
  border-bottom: 1px dashed silver;
  background-color: #fff;
}

.pic {
  flex-basis: 100px;
  height: 100px;
  border: 1px solid #ccc;
}
.pic img {
  width: 100px;
  height: 100px;
}
.content {
  padding-left: 10px;
}
.content p {
  margin: 0;
}
.price {
  color: #f00;
}
input[type='button'] {
  width: 80px;
  text-align: center;
  color: #fff;
  background-color: coral;
  border: none;
}
</style>